import React, { FC, useEffect } from "react";
import { QuestionRadioPropsType, OptionType } from "./interface";
import { Button, Checkbox, Form, Input, Select, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { nanoid } from "@reduxjs/toolkit";
const PropComponent: FC<QuestionRadioPropsType> = (
  props: QuestionRadioPropsType
) => {
  const { title, isVertical, value, options = [], onChange, disabled } = props;
  const [form] = Form.useForm();
  const handleChange = () => {
    if (onChange) {
      const newValues = form.getFieldsValue();
      if (newValues.options) {
        newValues.options = newValues.options.filter(
          (opt: OptionType) => !(opt.label == null)
        );
      }

      const { options = [] } = newValues as QuestionRadioPropsType;
      options.forEach((opt: OptionType) => {
        if (opt.value) return;
        opt.value = nanoid(5);
      });

      onChange(newValues);
    }
  };
  useEffect(() => {
    form.setFieldsValue({ title, isVertical, value, options });
  }, [title, isVertical, value, options]);
  return (
    <Form
      layout="vertical"
      initialValues={{ title, isVertical, value, options }}
      disabled={disabled}
      form={form}
      onValuesChange ={handleChange}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: "请输入单选标题" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="options">
          {(fields, { add, remove }) => (
            <>
              {fields.map((item, index) => {
                return (
                  <Space key={item.key} align="baseline">
                    <Form.Item
                      name={[item.name, "label"]}
                      rules={[
                        { required: true, message: "请输入选项" },
                        {
                          validator: (_, label) => {
                            const { options = [] } = form.getFieldsValue();
                            let num = 0;
                            options.forEach((opt: OptionType) => {
                              if (opt.label === label) num++;
                            });
                            if (num === 1) return Promise.resolve();
                            return Promise.reject(new Error("重复选项"));
                          },
                        },
                      ]}
                    >
                      <Input placeholder="请输入选项" />
                    </Form.Item>
                    {index > 1 && (
                      <MinusCircleOutlined onClick={() => remove(item.name)} />
                    )}
                  </Space>
                );
              })}
              <Form.Item>
                <Button
                  type="link"
                  onClick={() => add({ label: "", value: "" })}
                  block
                  icon={<PlusOutlined />}
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item label="默认选中项" name="value">
        <Select value={value} options={options}></Select>
      </Form.Item>
      <Form.Item label="是否居中" name="isVertical" valuePropName="checked">
        <Checkbox>纵向排列</Checkbox>
      </Form.Item>
    </Form>
  );
};
export default PropComponent;
